@import "basse";

page {
  height: 100%;
  .page {
    display: flex;
    height: 100%;
    flex-direction: row;
    .slider {
      height: 100%;
      width: rpx(200);
      border-right: solid 1px #e0e0e0;
      .slider-item {
        width: rpx(200);

        text-align: center;
        font-size: 14px;
        height: rpx(88);
        color: $app-text-color;
        &.active {
          border-left: solid 2px $app-color;
        }
        text {
          position: absolute;
          width: rpx(200);
          text-align: center;
          left: 0;
          line-height: rpx(88);
          &.active {
            color: $app-color;
          }
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      .category-item {
        display: flex;
        flex-direction: column;
        .title {
          display: flex;
          flex-direction: row;
          font-size: 14px;
          justify-content: center;
          align-items: center;
          height: 40px;
          .line {
            width: 40px;
            height: 1px;
            background: $border-color;
          }
          text {
            margin-left: 10px;
            margin-right: 10px;
            line-height: 40px;
          }
        }
        .child-content {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .child {
            flex: 0 0 33%;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .thumb {
              background: #f0f0f0;
              width: rpx(160);
              height: rpx(98);
            }
            text {
              margin: 10px;
              color: #888888;
              text-align: center;
            }
          }

        }
      }
    }
  }
}